<div id="chat" class="fixed">

  <div class="chat-inner">

    <h2 class="chat-header">
      <a href="#" class="chat-close" data-toggle="chat">
        <i class="fa-plus-circle rotate-45deg"></i>
      </a>
      Chat
      <span class="badge badge-success is-hidden">0</span>
    </h2>

    <div class="chat-group">
      <strong>Favorites</strong>
      <a href="#"><span class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
      <a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
      <a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
      <a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
    </div>

    <div class="chat-group">
      <strong>Work</strong>
      <a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Daniel A. Pena</em></a>
    </div>

    <div class="chat-group">
      <strong>Other</strong>
      <a href="#"><span class="user-status is-online"></span> <em>Dennis E. Johnson</em></a>
      <a href="#"><span class="user-status is-online"></span> <em>Stuart A. Shire</em></a>
      <a href="#"><span class="user-status is-online"></span> <em>Janet I. Matas</em></a>
      <a href="#"><span class="user-status is-online"></span> <em>Mindy A. Smith</em></a>
      <a href="#"><span class="user-status is-busy"></span> <em>Herman S. Foltz</em></a>
      <a href="#"><span class="user-status is-busy"></span> <em>Gregory E. Robie</em></a>
      <a href="#"><span class="user-status is-busy"></span> <em>Nellie T. Foreman</em></a>
      <a href="#"><span class="user-status is-busy"></span> <em>William R. Miller</em></a>
      <a href="#"><span class="user-status is-idle"></span> <em>Vivian J. Hall</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Melinda A. Anderson</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Gary M. Mooneyham</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Robert C. Medina</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Dylan C. Bernal</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Marc P. Sanborn</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Kenneth M. Rochester</em></a>
      <a href="#"><span class="user-status is-offline"></span> <em>Rachael D. Carpenter</em></a>
    </div>

  </div>

  <!-- conversation template -->
  <div class="chat-conversation">

    <div class="conversation-header">
      <a href="#" class="conversation-close">
        &times;
      </a>

      <span class="user-status is-online"></span>
      <span class="display-name">Arlind Nushi</span>
      <small>Online</small>
    </div>

    <ul class="conversation-body">
      <li>
        <span class="user">Arlind Nushi</span>
        <span class="time">09:00</span>
        <p>Are you here?</p>
      </li>
      <li class="odd">
        <span class="user">Brandon S. Young</span>
        <span class="time">09:25</span>
        <p>This message is pre-queued.</p>
      </li>
      <li>
        <span class="user">Brandon S. Young</span>
        <span class="time">09:26</span>
        <p>Whohoo!</p>
      </li>
      <li class="odd">
        <span class="user">Arlind Nushi</span>
        <span class="time">09:27</span>
        <p>Do you like it?</p>
      </li>
    </ul>

    <div class="chat-textarea">
      <textarea class="form-control autogrow" placeholder="Type your message"></textarea>
    </div>

  </div>

</div>

